import { getNum, spliteMatrix } from '../global';
/**
 * 获取 元素 的 位置 大小
 * @param {Element} el
 */
function getElementOffsetPosi(el) {
  let getcompEl = window.getComputedStyle(el);
  let matrixstr = getcompEl['transform'];
  return {
    offsetTop:
      matrixstr != 'none'
        ? spliteMatrix(matrixstr, 'translateY')
        : el.offsetTop,
    offsetLeft:
      matrixstr != 'none'
        ? spliteMatrix(matrixstr, 'translateX')
        : el.offsetLeft,
    width:
      el.offsetWidth -
      getNum(getcompEl.paddingLeft) -
      getNum(getcompEl.paddingRight),
    height:
      el.offsetHeight -
      getNum(getcompEl.paddingTop) -
      getNum(getcompEl.paddingBottom),
  };
}

function getElementViewOffsetPosi(el) {
  let viewOffsetPosi = getElementOffsetPosi(el);

  return {
    width: viewOffsetPosi['width'],
    height: viewOffsetPosi['height'],
    offsetTop: getbodyOffsetPosition(el, 'top'),
    offsetLeft: getbodyOffsetPosition(el, 'left'),
  };
}

function getbodyOffsetPosition(el, str) {
  let keys = 'offset' + str[0].toUpperCase() + str.substring(1);
  let translateDire = str == 'top' ? 'translateY' : 'translateX';
  // console.log(keys);
  let num = 0;
  let elclone = el;
  for (; elclone['offsetParent'] != null; ) {
    // console.log(window.getComputedStyle(elclone));
    let matrixstr = window.getComputedStyle(elclone)['transform'];
    if (matrixstr != 'none') {
      let trans = spliteMatrix(matrixstr, translateDire);
      // console.log(trans);
      num += Number(trans);
    }
    // console.log(elclone, elclone['offsetParent']);
    num += Number(elclone[keys]);
    // console.log(num);
    elclone = elclone['offsetParent'];
  }
  return num;
}

export { getElementOffsetPosi, getElementViewOffsetPosi };
